<%extends"admin/base.html"%><%block content%>
<div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6 layui-col-sm-12">
    <div class="layui-card">
        <div class="layui-card-header">快捷方式</div>
        <div class="layui-card-body">
            <div class="layui-carousel layadmin-carousel layadmin-shortcut">
                <div carousel-item>
                    <ul class="layui-row layui-col-space10 layui-this">
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md2"><a href="<< url_for('admin.BlogList') >>"><i
                                class="layui-icon layui-icon-read"></i><cite>博文列表</cite></a></li>
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md2"><a href="<< url_for('admin.CategoryList') >>"><i
                                class="layui-icon layui-icon-read"></i><cite>分类列表</cite></a></li>
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md2"><a href="<< url_for('admin.ReplyList') >>"><i
                                class="layui-icon layui-icon-read"></i><cite>博文评论列表</cite></a></li>
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md2"><a href="<< url_for('admin.LoveTextList') >>"><i
                                class="layui-icon layui-icon-template-1"></i><cite>微语列表</cite></a></li>
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md2"><a href="<< url_for('admin.MessageList') >>"><i
                                class="layui-icon layui-icon-water"></i><cite>留言列表</cite></a></li>
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md2"><a href="<< url_for('admin.PhotoList') >>"><i
                                class="layui-icon layui-icon-component"></i><cite>相册列表</cite></a></li>
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md2"><a href="<< url_for('admin.SystemInfo') >>"><i
                                class="layui-icon layui-icon-template"></i><cite>系统设置</cite></a></li>
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md2"><a href="<< url_for('admin.AboutMe') >>"><i
                                class="layui-icon layui-icon-template"></i><cite>关于我</cite></a></li>
                        <li class="layui-col-xs6 layui-col-sm3 layui-col-md2"><a href="<< url_for('admin.Monitor') >>"><i
                                class="layui-icon layui-icon-template"></i><cite>系统监控</cite></a></li>
                         <li class="layui-col-xs6 layui-col-sm3 layui-col-md2"><a href="<< url_for('admin.FriendHrefList') >>"><i
                                class="layui-icon layui-icon-template"></i><cite>友情链接</cite></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
            <div class="layui-col-md6 layui-col-sm-12">
                <div class="layui-card">
                    <div class="layui-card-header">数据指标</div>
                    <div class="layui-card-body">
                        <div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim=""
                            lay-indicator="inside" lay-arrow="none">
                            <div carousel-item="">
                                <ul class="layui-row layui-col-space10 layui-this">
                                    <li class="layui-col-xs6 layui-col-sm4 layui-col-md3"><a href="<< url_for('admin.BlogList') >>" class="layadmin-backlog-body"><h3>
                                        博文量</h3>
                                        <p><cite><< total_blog_num >></cite></p></a></li>
                                    <li class="layui-col-xs6 layui-col-sm4 layui-col-md3"><a href="<< url_for('admin.CategoryList') >>" class="layadmin-backlog-body"><h3>
                                        分类量</h3>
                                        <p><cite><< total_category_num >></cite></p></a></li>
                                    <li class="layui-col-xs6 layui-col-sm4 layui-col-md3"><a href="<< url_for('admin.ReplyList') >>" class="layadmin-backlog-body"><h3>
                                        博文评论量</h3>
                                        <p><cite><< total_blog_no_reply_num >> / << total_blog_reply_num >></cite></p></a></li>
                                    <li class="layui-col-xs6 layui-col-sm4 layui-col-md3"><a href="<< url_for('admin.MessageList') >>" class="layadmin-backlog-body"><h3>
                                        留言量</h3>
                                        <p><cite ><< total_message_no_num >> / << total_message_num >></cite></p></a></li>
                                    <li class="layui-col-xs6 layui-col-sm4 layui-col-md3"><a href="<< url_for('admin.LoveTextList') >>" class="layadmin-backlog-body"><h3>
                                        微语量</h3>
                                        <p><cite ><< total_loveText_num >></cite></p></a></li>
                                    <li class="layui-col-xs6 layui-col-sm4 layui-col-md3"><a href="<< url_for('admin.PhotoList') >>" class="layadmin-backlog-body"><h3>
                                        照片量</h3>
                                        <p><cite ><< total_photo_num >></cite></p></a></li>
                                    <li class="layui-col-xs6 layui-col-sm4 layui-col-md3"><a href="<< url_for('admin.FriendHrefList') >>" class="layadmin-backlog-body"><h3>
                                        友链量</h3>
                                        <p><cite ><< total_friend_href_num >></cite></p></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md8 layui-col-sm-12">
                <div class="layui-card">
                    <div class="layui-card-header">数据概览</div>
                    <div class="layui-card-body">
                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
                         <div carousel-item id="LAY-index-dataview">
                            <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                            <div></div>
                         </div>
                       </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4 layui-col-sm-12">
                <div class="layui-card">
                    <div class="layui-card-header">效果报告</div>
                    <div class="layui-card-body layadmin-takerates">
                        <div class="layui-progress" lay-showpercent="yes">
                            <h3 id="visited_percent_title">访问率（日同比 << visted_percent >>% <%if visted_percent>0 %><span class="layui-edge layui-edge-top" lay-tips="增长" lay-offset="-15"></span><% else %><span class="layui-edge layui-edge-bottom" lay-tips="下降" lay-offset="-15"></span><% endif %>）</h3>
                            <div class="layui-progress-bar" lay-percent="<< new_visted_percent >>%" style="width: << new_visted_percent >>%;" id="visited_percent_progress"><span class="layui-progress-text"><< new_visted_percent >>%</span></div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">实时监控</div>
                    <div class="layui-card-body layadmin-takerates">
                        <div class="layui-progress" lay-showpercent="yes">
                        <h3>CPU使用率</h3>
                        <div class="layui-progress-bar" lay-percent="<< monitor.cpu >>%" style="width: << monitor.cpu >>%;" id="cpu_percent"><span class="layui-progress-text"><< monitor.cpu >>%</span></div>
                        </div>
                        <div class="layui-progress" lay-showpercent="yes">
                            <h3>内存占用率（内存情况 <span id="mem_free"><< monitor.free >></span> / <span id="mem_total"><< monitor.total >></span> GB）</h3>
                        <div class="layui-progress-bar layui-bg-red" lay-percent="<< monitor.memory >>%" style="width: << monitor.memory >>%;" id="mem_percent"><span class="layui-progress-text"><< monitor.memory >>%</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md-12 layui-col-sm-12">
        <div class="layui-card">
            <div class="layui-tab layui-tab-brief layadmin-latestData">
                <ul class="layui-tab-title">
                    <li class="layui-this">热文排行榜</li>
                    <li class="">最新评论</li>
                  </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                  <table id="LAY-index-topSearch"></table>
                </div>
                <div class="layui-tab-item">
                  <table id="LAY-app-content-comm" lay-filter="LAY-app-content-comm"></table>
                </div>
              </div>
            </div>
        </div>
    </div>
        </div>
    </div>
</div>
<script type="text/html" id="newReplyBar">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="reply"><i
            class="layui-icon">&#xe608;</i>回复</a>
</script>
<%endblock%>
<%block script%>
    element.render("progress");
    layer.msg('欢迎使用后台管理系统',{icon:6,time:1000});
    var l = [];
    var n = [{
            title: {text: "今日流量趋势", x: "center", textStyle: {fontSize: 14}},
            tooltip: {trigger: "axis"},
            legend: {data: ["PV", "UV"],x:"left"},
            xAxis: [{
                type: "category",
                boundaryGap: !1,
                    data: << today_is_traffic_trends.label |safe >>
            }],
            dataZoom:[{show:true,realtime:true,start:90,end:100,},{type:'inside',realtime:true,start:90,end:100}],
            yAxis: [{type: "value"}],
            series: [{
                name: "PV",
                type: "line",
                smooth: !0,
                itemStyle: {normal: {areaStyle: {type: "default"}}},
                data:  << today_is_traffic_trends.pv >>
            }, {
                name: "UV",
                type: "line",
                smooth: !0,
                itemStyle: {normal: {areaStyle: {type: "default"}}},
                data: << today_is_traffic_trends.uv >>
            }]
        }, {
            title: {text: "访客浏览器分布", x: "center", textStyle: {fontSize: 14}},
            tooltip: {trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)"},
            legend: {orient: "vertical", x: "left", data:<< visitor_browser_distribution.label |safe >>},
            series: [{
                name: "访问来源",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: << visitor_browser_distribution.data |safe >>
            }]
        }]
        var r = $("#LAY-index-dataview").children("div");
        var o = function (e) {
            l[e] = echarts.init(r[e], layui.echartsTheme), l[e].setOption(n[e]), admin.resize(function () {
                l[e].resize()
            })
        };
        if (r[0]) {
            o(0);
            var d = 0;
            carousel.on("change(LAY-index-dataview)", function (e) {
                o(d = e.index)
            }), layui.admin.on("side", function () {
                setTimeout(function () {
                    o(d)
                }, 300)
            }), layui.admin.on("hash(tab)", function () {
                layui.router().path.join("") || o(d)
            })
        }
        
        layui.use("table", function() {
            var e = (layui.$,
            layui.table);
            // 热文排行榜
            e.render({
                elem: "#LAY-index-topSearch",
                url: "<< url_for('admin.hotBlogList') >>",
                page: !0,
                cols: [[{
                    field: "Id",
                    title: "ID"
                }, {
                    field: "title",
                    title: "标题",
                    minWidth: 300,
                    templet: '<div><a href="/details/{{ d.Id }}" target="_blank" class="layui-table-link">{{ d.title }}</div>'
                }, {
                    field: "readingVolume",
                    title: "阅读量",
                    minWidth: 50,
                    sort: !0
                }, {
                    field: "categoryName",
                    title: "分类",
                    sort: !0
                }]],
                skin: "line"
            }),
            // 最新评论
            e.render({
                elem: "#LAY-app-content-comm",
                url: "<< url_for('admin.newReplyList') >>",

                page: !0,
                cellMinWidth: 100,
                cols: [[{
                    type: "numbers",
                    fixed: "left"
                }, {
                    field: "blogName",
                    title: "博文标题"
                }, {
                    field: "userName",
                    title: "评论者"
                },{
                    field: "content",
                    title: "内容",
                },{field: "createTime", title: "评论时间", sort: !0},{
                    'title': '操作',
                    width: 100,
                    align: 'center',
                    toolbar: '#newReplyBar',
                    fixed: "right"
                }]],
                skin: "line"
            })
        })
    table.on("tool(LAY-app-content-comm)", function (t) {
        e=t.data;
        if(t.event=="reply"){
            layer.open({
                type: 2,
                title: "回复评论",
                content: "/admin/reply/reply/" + e.Id,
                area: ["500px", "300px"],
                btn: ["确定", "取消"],
                yes: function (e, i) {
                    var l = window["layui-layer-iframe" + e],
                    a = i.find("iframe").contents().find("#layuiadmin-app-form-edit");
                    a.click();
                }
            })
        }
    });
    $('.layui-nav-item').removeClass('layui-this');
    $('#admin_index_nav').addClass('layui-this');
    //每5s刷新一下实时监控数据
    setInterval(function(){
        $.ajax({
            url:"<< url_for('admin.MonitorInfo') >>",
            dataType:'json',
            success:function(res){
                var cpu_percent=res.cpu+'%';
$('#cpu_percent').css({'width':cpu_percent}).attr('lay-percent',cpu_percent).html('<span class="layui-progress-text">'+cpu_percent+'</span>');
                var mem_percent=res.memory+'%';
                $('#mem_percent').css({'width':mem_percent}).attr('lay-percent',mem_percent).html('<span class="layui-progress-text">'+mem_percent+'</span>');
                $('#mem_free').html(res.free);
                $('#mem_total').html(res.total);
            }
        });
    },5000);
    //每1小时刷新一下实时数据概述
    setInterval(function(){
        $.ajax({
            url:"<< url_for('admin.MonitorUserInfo') >>",
            dataType:'json',
            success:function(res){
                var new_visted_percent=res.new_visted_percent+'%';
                $('#visited_percent_progress').css({'width':new_visted_percent}).attr('lay-percent',new_visted_percent).html('<span class="layui-progress-text">'+new_visted_percent+'</span>');
                $('#visited_percent_title').html('访问率（日同比 '+res.visted_percent+'%'+( res.visted_percent>0?'<span class="layui-edge layui-edge-top" lay-tips="增长" lay-offset="-15"></span>':'<span class="layui-edge layui-edge-bottom" lay-tips="下降" lay-offset="-15"></span>')+')');

                n = [{
                    title: {text: "今日流量趋势", x: "center", textStyle: {fontSize: 14}},
                    tooltip: {trigger: "axis"},
                    legend: {data: ["", ""]},
                    xAxis: [{
                        type: "category",
                        boundaryGap: !1,
                            data: res.today_is_traffic_trends.label
                    }],
                    yAxis: [{type: "value"}],
                    series: [{
                        name: "PV",
                        type: "line",
                        smooth: !0,
                        itemStyle: {normal: {areaStyle: {type: "default"}}},
                        data:  res.today_is_traffic_trends.pv
                    }, {
                        name: "UV",
                        type: "line",
                        smooth: !0,
                        itemStyle: {normal: {areaStyle: {type: "default"}}},
                        data: res.today_is_traffic_trends.uv
                    }]
                }, {
                    title: {text: "访客浏览器分布", x: "center", textStyle: {fontSize: 14}},
                    tooltip: {trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)"},
                    legend: {orient: "vertical", x: "left", data:res.visitor_browser_distribution.data},
                    series: [{
                        name: "访问来源",
                        type: "pie",
                        radius: "55%",
                        center: ["50%", "50%"],
                        data: res.visitor_browser_distribution.list |safe
                    }]
                }, {
                    title: {text: "最近一周新增的用户量", x: "center", textStyle: {fontSize: 14}},
                    tooltip: {trigger: "axis", formatter: "{b}<br>新增用户：{c}"},
                    xAxis: [{type: "category", data: res.new_user_by_day.label}],
                    yAxis: [{type: "value"}],
                    series: [{type: "line", data: res.new_user_by_day.data}]
                }]
            }
        });
    },3600000)
<%endblock%>
